<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-02-07 11:12:01
 * @LastEditTime: 2022-03-25 16:59:44
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="check_box">
    <el-tabs v-model.trim="activeName">
      <el-tab-pane label="结算单详情" name="1">
        <h1>基本信息</h1>
        <el-form label-width="130px" class="commonFrom" style="margin-top: 8px !important">
          <el-form-item label="合同编号：" style="margin-bottom: -4px !important; margin-right: 500px">
            {{ settlement.contractNo }}
          </el-form-item>
          <el-form-item label="工程名称：" style="margin-bottom: -4px !important">
            {{ settlement.proName || '--' }}
          </el-form-item>
          <el-form-item label="供应商：" style="margin-bottom: -4px !important">
            {{ settlement.providerName || '--' }}
          </el-form-item>
          <el-form-item label="最晚结算日期：" style="margin-bottom: 8px !important">
            {{ settlement.settlementDate }}
          </el-form-item>
        </el-form>
        <h1>关联订单</h1>
        <div style="margin: 20px 0">
          <el-table
            :data="settlement.settlementOrderDetailDtoList"
            border
            class="bidding"
            tooltip-effect="light"
            ref="jdjgTable"
            :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
            :row-class-name="tabRowClassName"
            :summary-method="tableSummary"
            style="width: 100%"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center" prop="orderNo" show-overflow-tooltip> </el-table-column>
            <el-table-column label="货品明细" align="center" prop="orderDetails">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.orderDetails.split(',')" :key="index">
                  <el-tooltip effect="light" :content="item" placement="top-start">
                    <p class="text_hidde" style="width: 100%">
                      {{ item }}
                    </p>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="不含税金额(元)" align="center" prop="noTaxPrice"> </el-table-column>
            <el-table-column label="税金(元)" align="center" prop="taxPrice"> </el-table-column>
            <el-table-column label="价税合计(元)" align="center" prop="totalTaxPrice"> </el-table-column>
            <el-table-column label="订单状态" align="center" prop="orderStatus">
              <template slot-scope="scope">
                {{ scope.row.orderStatus == 105 ? '待验收' : '已完成' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <h1>金额和发票</h1>
        <el-form class="commonFrom" label-width="130px" style="margin-top: 8px">
          <el-form-item label="收款金额：" style="margin-bottom: -4px !important">
            {{ settlement.settlementTotalPrice }}&nbsp;元
          </el-form-item>
          <el-form-item label="发票要求：" style="margin-bottom: -4px !important">
            {{ settlement.invoiceRequirements | invoiceRequirements }}
            <span style="margin-left: 10px">
              {{ settlement.taxRate || '--' }}
              <span v-if="settlement.taxRate">%税率</span>
            </span>
          </el-form-item>
          <el-form-item label="金额调整：" style="margin-bottom: 8px !important；margin-left:500px">
            {{ settlement.adjustPrice || '--' }}
            <span v-if="settlement.adjustPrice">&nbsp;元</span>
          </el-form-item>
          <el-form-item label="调整原因：" style="margin-bottom: 8px !important">
            {{ settlement.adjustReason || '--' }}
          </el-form-item>
        </el-form>
        <h1>联系方式</h1>
        <el-form class="commonFrom" label-width="130px" style="margin-top: 8px">
          <el-form-item label="付款联系人：" style="margin-bottom: -4px !important">
            {{ settlement.payer || '请等待采购方填写付款联系人' }}
          </el-form-item>
          <el-form-item label="付款联系电话：" style="margin-bottom: -4px !important">
            {{ settlement.payerPhone || '--' }}
          </el-form-item>
          <el-form-item label="收款联系人：" style="margin-bottom: 8px !important">
            {{ settlement.payee || '请等待供应方填写收款联系人' }}
          </el-form-item>
          <el-form-item label="收款联系电话：" style="margin-bottom: 8px !important">
            {{ settlement.payeePhone || '--' }}
          </el-form-item>
        </el-form>
        <h1>附件上传</h1>
        <div class="upload-wrap">
          <el-upload
            class="upload-demo"
            multiple
            accept=".jpg,.png,.pdf"
            action
            :file-list="fileList"
            :on-preview="downFile"
          >
          </el-upload>
        </div>
        <div v-if="shipImgList.length" style="margin: 0 0 20px">
          <el-image
            style="width: 150px; height: 150px; margin-right: 20px"
            :src="item"
            v-for="(item, index) in shipImgList"
            :key="index"
            :preview-src-list="shipImgList"
          ></el-image>
        </div>
        <h1>结算说明</h1>
        <div style="margin-top: 20px">{{ settlement.settlementDescription || '暂无说明' }}</div>
      </el-tab-pane>
      <el-tab-pane label="审核记录" name="2" v-if="auditData.length">
        <el-table
          :data="auditData"
          border
          class="inventory_table"
          :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
          :row-class-name="tabRowClassName"
        >
          <el-table-column width="60" align="center" type="index" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核人" prop="approverName"> </el-table-column>
          <el-table-column align="center" label="审核意见" prop="approveIdea"> </el-table-column>
          <el-table-column align="center" label="审核结果" prop="approveStatus">
            <template slot-scope="scope">
              <div>
                {{ scope.row.approveStatus ? '审核通过' : '审核驳回' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核时间" prop="createTime"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="开票信息" name="3" v-if="billing">
        <el-table
          :data="billingData"
          border
          class="inventory_table"
          :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
          :row-class-name="tabRowClassName"
        >
          <el-table-column width="60" align="center" type="index" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额" prop="settlementTotalPrice"> </el-table-column>
          <el-table-column align="center" label="发票类型" prop="invoiceRequirements">
            <template slot-scope="scope">
              <div>
                {{ scope.row.invoiceRequirements | invoiceType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="processState">
            <template slot-scope="scope">
              <div>
                {{ scope.row.processState | invoiceStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="详情" prop="logisticsInfo">
            <template slot-scope="scope">
              <div v-if="enterpriseType == 1">
                <el-button
                  type="text"
                  class="xg czBtn"
                  @click="handelClick(scope.row, '下载发票')"
                  v-if="scope.row.invoiceRequirements == 26 && scope.row.processState == 1"
                >
                  下载发票
                </el-button>
                <span v-else>{{ scope.row.logisticsInfo + ' ' + (scope.row.trackingNumber || '') || '--' }}</span>
              </div>
              <div v-else>
                <el-button
                  type="text"
                  class="xg czBtn"
                  @click="handelClick(scope.row, '查看电子发票')"
                  v-if="scope.row.invoiceRequirements == 26 && scope.row.processState == 1"
                >
                  查看
                </el-button>
                <span v-if="scope.row.invoiceRequirements != 26 && scope.row.processState == 1">--</span>
                <el-button
                  type="text"
                  class="xg czBtn"
                  @click="handelClick(scope.row, '填写物流单号')"
                  v-if="scope.row.invoiceRequirements != 26 && scope.row.processState == 2 && !scope.row.trackingNumber"
                >
                  填写物流单号
                </el-button>
                <el-button
                  type="text"
                  class="xg czBtn"
                  @click="handelClick(scope.row, '修改物流单号')"
                  v-if="scope.row.invoiceRequirements != 26 && scope.row.processState == 2 && scope.row.trackingNumber"
                >
                  修改物流单号
                </el-button>
                <el-button
                  type="text"
                  class="xg czBtn"
                  @click="handelClick(scope.row, '标记签收')"
                  v-if="scope.row.invoiceRequirements != 26 && scope.row.processState == 2 && !scope.row.sign"
                >
                  标记签收
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-form label-width="85px" class="commonFrom" style="margin-top: 20px !important">
          <el-form-item label="开票总额：" style="color: #333333 !important">
            <span style="font-size: 24px">{{ billingTotal }}</span>
            元
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="enterpriseType == 1 ? '付款信息' : '收款信息'" name="4" v-if="payment">
        <el-table
          :data="receivePaymentData"
          border
          class="inventory_table"
          :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
          :row-class-name="tabRowClassName"
        >
          <el-table-column width="60" align="center" type="index" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="付款账户" prop="tradeAccountCode"> </el-table-column>
          <el-table-column align="center" label="金额" prop="tradeAmount"> </el-table-column>
          <el-table-column align="center" label="收款账户" prop="bankAccountCode"> </el-table-column>
          <el-table-column align="center" label="到账状态">
            <template>
              <div>已到账</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="到账时间" prop="tradeDate">
            <template slot-scope="scope">
              <div>
                {{ scope.row.tradeDate + ' ' + scope.row.tradetime }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      width="1000px"
      :center="true"
      :title="title"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="visiable"
      v-if="visiable"
    >
      <shipment-number-modify :invoiceId="invoiceId" :updateFrom="updateFrom" @close="close"></shipment-number-modify>
    </el-dialog>
  </div>
</template>

<script>
import ShipmentNumberModify from './ShipmentNumberModify.vue'
export default {
  components: { ShipmentNumberModify },
  props: {
    settlementId: {
      type: [String, Number]
    },
    billing: {
      type: Boolean,
      default: false
    },
    payment: {
      type: Boolean,
      default: false
    },
    formValue: {
      type: Object
    }
  },
  data() {
    return {
      billingTotal: '',
      updateFrom: {},
      invoiceId: '',
      visiable: false,
      title: '',
      enterpriseType: localStorage.getItem('enterpriseType'),
      fileList: [],
      shipImgList: [],
      receivePaymentData: [],
      auditData: [],
      billingData: [],
      activeName: '1',
      settlement: {}
    }
  },
  filters: {
    invoiceRequirements(val) {
      const obj = {
        1: '增值税专用发票',
        2: '增值税普通发票',
        3: '普通发票'
      }
      return obj[val]
    },
    invoiceType(val) {
      const obj = {
        4: '增值税专用发票[纸质]',
        7: '增值税普通发票[纸质]',
        26: '增值税电子发票[电子]'
      }
      return obj[val]
    },
    invoiceStatus(val) {
      const obj = {
        1: '已开票',
        2: '已打印',
        3: '已作废',
        4: '已冲红'
      }
      return obj[val]
    }
  },
  mounted() {
    if (this.formValue && JSON.stringify(this.formValue) != '{}') {
      this.settlement = this.formValue
      this.auditData = this.formValue.settlementApproveHistoryList || []
      this.settlement.settlementOrderDetailDtoList = this.formValue.settlementOrderDetailList || []
      this.fileList = (this.formValue.attachUrl && JSON.parse(this.formValue.attachUrl)) || []
      return false
    }
    this.getData()
    this.getReview()
    if (this.billing || this.payment) {
      this.getBilling()
    }
    if (this.payment) {
      this.getPayment()
    }
  },
  methods: {
    close(val) {
      this.visiable = false
      this.updateFrom = {}
      val && this.getBilling()
    },
    handelClick(scope, value) {
      this.updateFrom = scope
      this.invoiceId = scope.id
      this.title = value
      this.visiable = true
      if (value == '下载发票') {
        this.title = ''
        this.visiable = false
        this.updateFrom = {}
        this.$https({
          method: 'post',
          url: '/invoice/download?id=' + this.settlementId
        })
          .then(res => {
            if (res.code == 0) {
              // location.href = res.data
              this.common
                .getBlob(res.data)
                .then(res => {
                  this.common.saveAs(res, '电子发票')
                })
                .catch(err => {
                  console.log(err)
                })
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else if (value == '标记签收') {
        this.title = ''
        this.updateFrom = {}
        this.visiable = false
        this.$confirm('只可标记签收一次,是否标记签收!', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$https({
            method: 'post',
            url: '/settlement/sign?id=' + scope.id
          }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getBilling()
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      }
    },
    downFile(file) {
      this.common
        .getBlob(file.response.data)
        .then(res => {
          this.common.saveAs(res, file.name)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取结算单详情
    getData() {
      this.$https({
        method: 'post',
        url: '/settlement/settlementDetails?id=' + this.settlementId
      })
        .then(res => {
          // console.log(res)
          if (res.code == 0) {
            this.settlement = res.data
            this.settlement.settlementOrderDetailDtoList = res.data.settlementOrderDetailList
            this.fileList = (res.data.attachUrl && JSON.parse(res.data.attachUrl)) || []
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getReview() {
      this.$https({
        method: 'post',
        url: '/settlement/approveHistoryList?id=' + this.settlementId
      })
        .then(res => {
          if (res.code == 0) {
            this.auditData = res.data || []
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getBilling() {
      this.$https({
        method: 'post',
        url: '/settlement/invoiceListBySettId?id=' + this.settlementId
      }).then(res => {
        if (res.code == 0) {
          this.billingData = [res.data] || []
          this.billingData.forEach(item => {
            this.billingTotal += item.settlementTotalPrice
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getPayment() {
      this.$https({
        method: 'post',
        url: '/payOfSettlement/findDetailsBySetId',
        data: {
          id: this.settlementId
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.receivePaymentData = [res.data]
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    // 表格合计自定义方法
    tableSummary(arr) {
      console.log(arr)
    }
  }
}
</script>
<style lang="less" scoped>
#check_box {
  /deep/ .el-tabs__header {
    margin-bottom: 30px;
  }
}
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.ty {
  color: #ff3d3d;
}
.mgn {
  margin-top: 20px;
}
.auditfrom {
  margin: 16px 0 0;
  .el-form-item {
    width: 43% !important;
    margin-bottom: 16px !important;
  }
}
.footer {
  text-align: center;
  margin-top: 20px;
}
.upload-wrap {
  /deep/.el-upload {
    display: none;
  }
  /deep/.el-upload-list {
    display: flex;
    align-items: center;
    width: 600px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .el-upload-list__item {
      width: 260px;
      margin: 20px 30px 0 0;
      background: #f0f1f2;
      border: 1px solid #d6d6d6;
    }
    .el-icon-close {
      &:hover {
        color: #fa7355;
      }
    }
  }
}
</style>
